import React from 'react';
import { withRouter } from 'react-router-dom';
import { Menu } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
} from '@ant-design/icons';

import "./index.css";

// 菜单的数据
const items = [
  {
    key: "/Admin/Lifcly",
    icon: <PieChartOutlined />,
    label: "生命周期",
  },
  {
    key: "2",
    icon: <DesktopOutlined />,
    label: "性能优化",
    children: [
      {
        key: "/Admin/Optimizing",
        icon: <DesktopOutlined />,
        label: "性能优化1",
      },
      {
        key: "2-2",
        icon: <DesktopOutlined />,
        label: "性能优化2",
      }
    ],
  },
  {
    key: "3",
    icon: <DesktopOutlined />,
    label: "组件间通信",
    children: [
      {
        key: "/Admin/ParentAndSon",
        icon: <DesktopOutlined />,
        label: "父子组件通信",
      },
      {
        key: "/Admin/ParentToSonRef",
        icon: <DesktopOutlined />,
        label: "父子组件通信(Ref)",
      },
      {
        key: "/Admin/SonToSon",
        icon: <DesktopOutlined />,
        label: "兄弟组件通信（发布订阅)",
      },
      {
        key: "/Admin/SonToSonUpState",
        icon: <DesktopOutlined />,
        label: "兄弟组件通信（状态提升)",
      },
      {
        key: "/Admin/ContextTree",
        icon: <DesktopOutlined />,
        label: "状态树传参（越级）",
      }      
    ]
  },
  {
    key: "/Admin/Hoc",
    icon: <DesktopOutlined />,
    label: "高阶组件"
  },  
  {
    key: "5",
    icon: <DesktopOutlined />,
    label: "路由传参",
    children: [
      {
        key: "/Admin/ListParams",
        icon: <DesktopOutlined />,
        label: "Params",
      },
      {
        key: "/Admin/ListQuery",
        icon: <DesktopOutlined />,
        label: "Query和state",
      },
      {
        key: "/Admin/ListSearch",
        icon: <DesktopOutlined />,
        label: "Search",
      }
    ]
  } ,  
  {
    key: "6",
    icon: <DesktopOutlined />,
    label: "hooks",
    children: [
      {
        key: "/Admin/UseStateDemo",
        icon: <DesktopOutlined />,
        label: "useState",
      },
      
      {
        key: "/Admin/UseEffectDemo",
        icon: <DesktopOutlined />,
        label: "UseEffect",
      },      
      {
        key: "/Admin/MemoDemo",
        icon: <DesktopOutlined />,
        label: "memo高阶组件"
      } ,      
      {
        key: "/Admin/UseCallbackDemo",
        icon: <DesktopOutlined />,
        label: "UseCallback"
      },      
      {
        key: "/Admin/UseMemoDemo",
        icon: <DesktopOutlined />,
        label: "UseMemo"
      }  ,      
      {
        key: "/Admin/UseContextDemo",
        icon: <DesktopOutlined />,
        label: "UseContext"
      }  ,      
      {
        key: "/Admin/UseRefDemo",
        icon: <DesktopOutlined />,
        label: "UseRef"
      }    ,      
      {
        key: "/Admin/UseReducerDemo",
        icon: <DesktopOutlined />,
        label: "UseReducer"
      },      
      {
        key: "/Admin/UseTransitionDemo",
        icon: <DesktopOutlined />,
        label: "UseTransition"
      },      
      {
        key: "/Admin/RouterHooksDemo",
        icon: <DesktopOutlined />,
        label: "路由相关的hooks"
      },      
      {
        key: "/Admin/MyHooksDemo",
        icon: <DesktopOutlined />,
        label: "自定义hooks"
      }           
    ]
  } 
];

const MyMenu = (props) => {


//   跳转页面
  function goPage({ item, key, keyPath, domEvent }) {

    console.log("MyMenu.props",props);
    // 编程式导航。
    props.history.push(key);
  }

  return (
        <Menu theme="dark" defaultSelectedKeys={['2-1']} mode="inline" items={items} onClick={goPage} />
  );
};

export default withRouter(MyMenu);